<template>
  <div class="home">
    <div class="name">信息公告</div>
    <div class="center">
      <el-table :data="list" style="width: 100%" @row-click="goToDetails">
        <el-table-column align="center" label="序号" type="index" width="150">
        </el-table-column>
        <el-table-column prop="title" label="公告名称"> </el-table-column>
        <el-table-column
          width="150"
          label="公告类型"
          :filters="[
            { text: '招标预告', value: '1' },
            { text: '招标公告', value: '2' },
            { text: '中标公告', value: '3' },
            { text: '企业采购', value: '4' },
          ]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            {{ getAnnouncementType(scope.row.announcementType) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="releaseTime"
          label="发布时间"
          width="150"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.releaseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="getList"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getListByPage } from "@/api/procurement/list";
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
    };
  },
  mounted() {
    this.getList();
  },
  computed: {},
  methods: {
    // 公告类型过滤
    filterHandler(value, row, column) {
      return row['announcementType'] + "" == value;
    },
    // 公告类型转换
    getAnnouncementType(type) {
      if (type == 1) {
        return "招标预告";
      } else if (type == 2) {
        return "招标公告";
      } else if (type == 3) {
        return "中标公告";
      } else if (type == 4) {
        return "企业采购";
      }
    },
    // 跳转到详情页
    goToDetails(row, column, event) {
      this.$router.push({
        name: "noticeDetails",
        query: {
          listId: row.listId,
        },
      });
    },
    // 获取列表
    getList() {
      getListByPage({
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        listType: 1,
        announcementType:this.$route.query.noticeType
      }).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
  },
};
</script>
<style  scoped>
.img {
  height: 170px;
  display: flex;
  align-items: center;
}
>>> .el-image {
  width: 250px;
  margin-right: 40px;
  height: 100%;
}
.home {
  background-color: #fbfbfb;
  padding-bottom: 100px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 25px 0;
}
.page {
  float: right;
  padding: 30px 0;
}
</style>
